<template>
  <view class="component-box" :style="[outModuleCss]" v-if="goodsList.length">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="diy-product" :class="!showModuleName ? 'add-padding' : ''">
      <view class="section-header" v-if="showModuleName" @click="skipToLink">
        <view class="module-header" v-if="showModuleName">
          <view class="module-name" :style="[moduleNameCss]">{{
            showModuleName ? moduleName : ""
          }}</view>
          <view
            class="more"
            :style="[moduleMoreCss]"
            v-if="propsData.params.showMoreText"
          >
            <span>{{ propsData.params.moreText }}</span>
            <i class="iconfont icon-arrow-right"></i>
          </view>
        </view>
        <view :style="[heaerBgCss]" class="module-bg"></view>
      </view>
      <view class="section-body">
        <defaultTem
          :propsData="propsData"
          :goodsList="goodsList"
          @toGoodDetail="toGoodDetail"
        ></defaultTem>
      </view>
    </view>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";
import defaultTem from "./templates/defaultTem.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      }
    },

    product_type: {
      type: Number,
      default: 6
    }
  },
  components: {
    defaultTem
  },
  mixins: [diyMixin], //混入文件
  data() {
    return {
      goodsList: [],
      selectArr: [],
      page: 1,
      pageSize: "",
      goodsOfAdd: {} // 添加到购物车的商品
    };
  },
  computed: {
    styleType() {
      return this.propsData.params.styleType;
    },
    moduleName() {
      return this.propsData.params.moduleName;
    },
    /**
     * 商品数据来源
     * select: 手动选择添加
     * classify 选择分类
     * */
    productDataFrom() {
      return this.propsData.params.productDataFrom || "select";
    },
    classifyId() {
      return this.propsData.params.classifyData;
    },
    selectData() {
      return this.propsData.params.selectData;
    },
    showPrice() {
      return this.propsData.params.showPrice;
    },
    showSales() {
      return this.propsData.params.showSales;
    },
    showModuleName() {
      return this.propsData.params.showModuleName;
    },
    moduleNameCss() {
      let style = this.propsData.params.moduleNameCss;
      if (style?.fontNum) {
        style.fontSize = `${style.fontNum * 2}rpx`;
      }
      return style;
    },
    moduleMoreCss() {
      let style = this.propsData.params.moduleMoreCss;
      if (style?.fontNum) {
        style.fontSize = `${style.fontNum * 2}rpx`;
      }
      return style;
    },
    heaerBgCss() {
      if (!this.propsData.params?.headerBg) return "";
      let style = JSON.parse(JSON.stringify(this.propsData.params.headerBg));

      if (!style.useBackground) {
        return {
          background: "inherit"
        };
      }
      return style;
    }
  },
  mounted() {
    this.filterSelectData();
  },
  methods: {
    // 筛选出商品id数组
    filterSelectData() {
      if (this.productDataFrom == "select") {
        this.selectData.forEach((d) => {
          this.selectArr.push(d.id);
        });
      }
      this.initProductData();
    },
    // 初始化商品数据
    initProductData() {
      let params = {};
      if (this.productDataFrom == "classify") {
        if (!this.classifyId) return;

        params = {
          cat_id: this.classifyId,
          page: this.page,
          limit: this.pageSize
        };
        this.getProducts(params);
      } else {
        if (!this.selectArr.length) return;
        params = {
          goods_id: this.selectArr.slice((this.page - 1) * 10, this.page * 100)
        };
        this.getProducts(params);
      }
    },

    // api获取商品数据
    async getProducts(params) {
      const res = await this.$allrequest.diy.getWorkerGoods({
        ...params,
        product_type: this.product_type,
        status: 1
      });
      if (res.code == 0) {
        if (params.isLoadMore) {
          this.goodsList = [...this.goodsList, ...res.data.list];
        } else {
          this.goodsList = res.data.list;
        }
      }
    },

    // 跳转商品详情
    toGoodDetail(e) {
      if (!e) return;
      let id = e.id,
        url;

      switch (this.product_type) {
        case 6:
          url = "/marketing/serviceHome/goods/item/index?id=" + id;
          break;

        case 2:
          url = `/goods/goods/goods?id=${id}`;
          break;

        default:
          break;
      }

      uni.navigateTo({
        url
      });
    },

    skipToLink() {
      let url;
      switch (this.product_type) {
        case 6:
          url = "/marketing/serviceHome/category/index/index";
          break;

        case 2:
          url = "/marketing/booking/index/index";
          break;

        default:
          break;
      }

      uni.navigateTo({
        url
      });
    }
  }
};
</script>

<style scoped lang="scss">
.component-box {
  width: 100%;
  position: relative;
  .diy-product {
    width: 100%;
    .section-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      padding: 0 3.2vw;
      position: relative;

      .module-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .module-name {
          font-size: 4.267vw;
          font-weight: 600;
          color: #262626;
          margin-bottom: 0;
        }
        .more {
          display: flex;
          align-items: center;
          font-size: 3.2vw;
          font-weight: 400;
          color: #888888;
          margin-bottom: 0;
          line-height: 4.267vw;
          .iconfont {
            font-size: 2.267vw;
          }
        }
      }
    }
    .section-body {
      width: 100%;
      // padding-bottom: 3.2vw;
    }
  }
  .add-padding {
    padding-top: 3.2vw;
  }

  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
